<!--

    Copyright (C) 2015 The Gravitee team (http://gravitee.io)

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

            http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->
<div class="gv-forms-header">
  <h3>Timeframe</h3>
  <div class="ipsum">Timeframe when notifications should be sent</div>
</div>

<div class="gv-form-content" layout="column">
  <div ng-repeat="period in $ctrl.alert.notificationPeriods" layout-gt-sm="row">
    <div flex="90">
      Every <code>{{$ctrl.getDayNames(period)}}</code>
      <span ng-if="$ctrl.isRange(period)"
        >from <code>{{$ctrl.formatPeriod(period.beginHour)}}</code> to <code>{{$ctrl.formatPeriod(period.endHour)}}</code>
        [<code>{{period.zoneId}}</code>]
      </span>
      <span ng-if="$ctrl.isTime(period)">
        at <code>{{$ctrl.formatPeriod(period.beginHour)}}</code>
        [<code>{{period.zoneId}}</code>]
      </span>
    </div>
    <gv-button icon="general:rename" ng-click="$ctrl.edit($index)" small outlined primary>Edit</gv-button>
    <gv-button icon="general:trash" ng-click="$ctrl.remove($index)" small outlined danger>Remove</gv-button>
  </div>

  <div ng-if="$ctrl.alert.notificationPeriods.length === 0">No timeframe defined, it will send all the time.</div>

  <gv-expandable
    ng-open="open"
    ng-on-gv-row-expandable:toggle="$ctrl.onToggleForm($event)"
    class="gv-trigger-timeframe_form"
    title="Add a timeframe"
  >
    <div slot="summary">Add a timeframe</div>
    <div slot="details" ng-form name="timeframe" class="gv-trigger-timeframe_form-details">
      <div layout-gt-sm="row" layout-align="space-between center">
        <md-input-container flex="65">
          <label>Days</label>
          <md-select ng-required="open" ng-model="timeframe.days" multiple>
            <md-option ng-repeat="day in $ctrl.days" ng-value="day"> {{day}} </md-option>
          </md-select>
        </md-input-container>

        <gv-switch
          ng-model="timeframe.businessDays"
          gv-model
          flex="30"
          aria-label="Business day"
          label="Business day"
          description="Set any day except weekend"
        >
        </gv-switch>
      </div>
      <div layout-gt-sm="row" layout-align="space-between center">
        <div flex="65">
          <gv-date-picker label="Time range" time strict range gv-model ng-model="timeframe.range"></gv-date-picker>
        </div>
        <gv-switch
          ng-model="timeframe.officeHours"
          gv-model
          flex="30"
          aria-label="Office hours"
          label="Office hours"
          ng-attr-description="{{$ctrl.getOfficeHoursDescription()}}"
        >
        </gv-switch>
      </div>
      <div layout-gt-sm="row" layout-align="end end">
        <gv-button icon="code:plus" outlined ng-click="$ctrl.add(timeframe)" small ng-disabled="timeframe.$invalid">Add </gv-button>
      </div>
    </div>
  </gv-expandable>
</div>
